<template>
    <div class="P-page">
        <!-- 全局组件 -->
        <toast :show="showToast" :text="toastTip" @update:show="updateToast"></toast>
        <loading :show.sync="showLoading"></loading>
        <popup :show="showPopup" :config="popConf" @update:show='updateShow'>
            <template v-slot:body>{{ popCon }}</template>
        </popup>


        <section class="P-pageMain">
            <router-view></router-view>
        </section>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState(['showLoading', 'showToast', 'toastTip', 'popConf', 'popCon', 'showPopup'])
    },
    methods: {
        updateShow(val){
            console.log(`updateShow: ${val}`);
            this.$store.commit('togglePop', val)
        },
        updateToast(val){
            this.$store.commit('toggleToast', val);
        }
    }
};
</script>

<style lang="less">
.P-page {
    width: 100%;
    height: 100%;
    &Main {
        width: 100%;
        height: 100%;
    }
}
</style>